<template>
	<view>
		<view class="dw1">
			<image class="dw1a" src="/static/images/icon/speaker.png" mode="aspectFit"></image>
			<view class="marquee-container">
				<view class="marquee-content" :style="{ transform: 'translateX(' + translateX + 'px)' }">{{ text }}
				</view>
			</view>
		</view>

		<view class="dw2">
			<view>
				<view class="dw2a">游戏余额</view>
				<view class="dw2b">0（元）</view>
			</view>
			<view class="dw2c">
				<button class="dw2d" size="mini">提现</button>
			</view>
			
		</view>
		<view class="dw3">
			<view
						class="dw3a"
			          v-for="(item, index) in viewList"
			          :key="index"
			          :class="{ 'selected': selectedIndex === index }"
			          @click="selectView(index)"
			      >
			          {{ item }}
			      </view>
		</view>
   <view class="bottom-button-container">
            <!-- 第一个按钮 -->
            <view class="button-item1">
					<image src="/static/images/icon/service.png" mode="aspectFit" class="button1a"></image>
				<view>联系客服</view></view>
            <!-- 第二个按钮 -->
            <view class="button-item2">
			
				立即充值
				</view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '这是一段较长的跑马灯文字，它会不断循环滚动显示。嘿嘿嘿',
				translateX: 0,
				containerWidth: 0,
				textWidth: 0,
				timer: null,
				  // 存储每个 view 的文本内容
				            viewList: ['￥30', '￥50', '￥100', '￥200', '￥200', '￥200'],
				            // 记录当前选中 view 的索引，初始为 -1 表示未选中
				            selectedIndex: -1
			}
		},
		onReady() {
			// 获取容器宽度
			uni.createSelectorQuery().select('.marquee-container').boundingClientRect((rect) => {
				this.containerWidth = rect.width;
				// 获取文字内容宽度
				uni.createSelectorQuery().select('.marquee-content').boundingClientRect((textRect) => {
					this.textWidth = textRect.width;
					// 设置初始位置
					this.translateX = this.containerWidth;
					// 启动跑马灯动画
					this.startMarquee();
				}).exec();
			}).exec();
		},

		methods: {
			startMarquee() {
				this.timer = setInterval(() => {
					this.translateX--;
					if (this.translateX < -this.textWidth) {
						this.translateX = this.containerWidth;
					}
				}, 10);
			},
			    selectView(index) {
			            this.selectedIndex = index;
			        }
		}
	}
</script>

<style>
	.marquee-container {
		width: 300px;
		height: 30px;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
	}

	.marquee-content {
		position: absolute;
		white-space: nowrap;
		font-size: 16px;
	
	}

	.dw1 {
		background-color: #e3bbdc;
		display: flex;
		align-items: center;
		
	}

	.dw1a {
		width: 16px;
		height: 16px;
		padding: 5px 10px;
	}
	.dw2{
		display: flex;
		background: linear-gradient(to top right, #ff9bfa, #a1a1ff);
		    justify-content: space-between;
			padding: 10px;
	}
	.dw2a{
		color: #dcdcdc;
		font-size: 16px;
	}
	.dw2b{
		color: #fff;
		font-size: 20px;
	}
	.dw2c{
		display: flex;
		align-items: flex-end;
	}
	.dw2d{
		background-color: transparent;
		 border: 1px solid white;
		  color: white;
	}
	.dw3{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}
	.dw3a{
		/* 设置每个 view 的基本样式 */
		margin: 5px;
		padding: 10px 20px;
		background-color: #a1a1ff;
		display: flex;
		align-items: center;
		    justify-content: center;
		    flex-direction: column;
		width: 18%;
		height: 60px;
		border: 2px solid #fff;
	}
	
	.selected {
	    /* 选中状态下的样式，红色边框 */
	    border: 2px solid red;
	}
	.bottom-button-container {
	    /* 固定定位在页面底部 */
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    /* 使用 flex 布局，水平排列子元素 */
	    display: flex;
	}
	
	.button-item1 {
	   
	    flex: 1;
	    text-align: center;
	
	    background-color: #ffffff;
	    color: #9e9e9e;
	    border: none;
	}
	.button-item2 {
	  
	    flex: 1;
	    text-align: center;
	    padding: 15px;
	    background-color: #007aff;
	    color: white;
	    border: none;
	}
	.button1a{
		width: 16px;
		height: 16px;
	}
</style>